/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

$game-color-1 : #282c35;
$game-color-2 : #21252b;
$game-color-3 : #191b1f;


@mixin game-btn() {
	border: 1px solid #000000;
	background-color: $game-color-2;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	overflow: hidden;
	&:hover{
		background-color: $game-color-3;
	}
}

@mixin qlty-color(){
	&.qlty-2{
		color:#0099cc;
	}
	&.qlty-3{
		color:#f0ad4e;
	}
	&.qlty-4{
		color:#dd524d;
	}
}

@mixin qlty-bg-color(){
	&.qlty-2{
		box-shadow: 0 0 15px 4px rgba(0, 153, 204, .7) inset;
	}
	&.qlty-3{
		box-shadow: 0 0 15px 4px rgba(240, 173, 78, .7) inset;
	}
	&.qlty-4{
		box-shadow: 0 0 15px 4px rgba(221, 82, 77, .75) inset;
	}
}

@mixin role($role){
	
	@keyframes player_attack {
		0% {
			left:0;
		}
			
		50% {
			left:20px;
		}
			
		100% {
			left:0;
		}
	}
	
	@keyframes monster_attack {
		0% {
			left:0;
		}
			
		50% {
			left:-20px;
		}
			
		100% {
			left:0;
		}
	}
	
	
	@keyframes underAttack {
		0% {
			opacity: 1;
		}
		
		25% {
			opacity: .5;
		}
		
		50% {
			opacity: 1;
		}
		
		75% {
			opacity: .5;
		}
			
		100% {
			opacity: 1;
		}
	}
	
	
	@keyframes ani_fadeOut {
		0% {
			opacity: 1;
		}
	
		100% {
			opacity: 0;
		}
	}
	
	@keyframes damageText_normal {
		0%{
			transform: scale3d(2.2,2.2,2.2);
		}
		10%{
			transform: scale3d(1,1,1);
			opacity: 1;
		}
		60%{
			opacity: 1;
		}
		100%{
			transform: translate3d(20px,-20px,0);
			opacity: 0;
		}
	}
	
	@keyframes damageText_crit {
		0%{
			transform: scale3d(3,3,3);
		}
		10%{
			transform: scale3d(1,1,1);
			opacity: 1;
		}
		30%{
			opacity: 1;
		}
		100%{
			transform: translate3d(20px,-20px,0);
			opacity: 0;
		}
	}
	
	@keyframes damageText_suck_blood {
		0%{
			transform: translate3d(0,0,0);
		}
		80%{
			opacity: 1;
		}
		100%{
			transform: translate3d(-30px,-30px,0);
			opacity: 0;
		}
	}
	
	
	.comp-role{
		position: relative;
		width:200px;
		min-height: 90px;
		.role{
			width:200px;
			border: 1px solid #000;
			background-color: $game-color-2;
			border-radius: 4px;
			display: flex;
			flex-direction: column;
			position: absolute;
			left:0;
			top:0;
			&.attack{
				animation: #{$role}_attack .2s;
			}
			&.underAttack{
				animation: underAttack .2s;
			}
			&.dead{
				animation: ani_fadeOut 1s;
				animation-fill-mode: forwards;
			}
			
			.role-name{
				display: flex;
				justify-content: center;
				align-items: center;
				height:70px;
				font-size:16px;
			}
			
			.progress{
				border-bottom-left-radius:4px ;
				border-bottom-right-radius:4px ;
				overflow: hidden;
				.hp{
					border-top: 1px solid #000;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					.info-text{
						font-size:11px;
						color:#fff;
						transform-origin: bottom center;
						position: absolute;
						bottom:-1px;
						transform:scale(0.8);
						
					}
				}
				.rate{
					border-top: 1px solid #000;
				}
			}
		}
		
		.damageData{
			position: absolute;
			z-index: 999;
			left:0;
			top:0;
			right:0;
			bottom:0;
			display: flex;
			justify-content: center;
			align-items: center;
			.text{
				position: absolute;
				font-family: 'demonized';
				font-size: 24px;
				background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
				-webkit-text-stroke: 1px #fff;
				&.normal{
					animation: damageText_normal 1s;
					animation-fill-mode: forwards;
					color:var(--color-red);
					&:before{
						content : '-';
					}
				}
				&.crit{
					animation: damageText_crit 1s;
					animation-fill-mode: forwards;
					color:var(--color-red);
					font-size:30px;
					margin-top:-10px;
					&:before{
						content : '-暴击';
						font-style: italic;
						margin-right:10px;
						font-size:34px;
						font-weight: bold;
					}
				}
				&.suck_blood{
					animation: damageText_suck_blood 1s;
					animation-fill-mode: forwards;
					color:var(--color-green);
					-webkit-text-stroke: 1px springgreen;
					&:before{
						content : '+';
					}
				}
			}
		}
		
	}
}